<template>
  <!-- 装配时间 -->
  <FormItem>
    <template #label>
      <span
        class="content-item-label"
        :style="{
          color: themeStyle[theme].textColor1
        }"
        >{{ '装配时间' }}</span
      >
    </template>
    <div style="display: flex">
      <Input v-model:value="Nodedata.simData.assemble.assembleTime" type="number" size="small" />
    </div>
  </FormItem>
  <!-- 产品样式 -->
  <FormItem>
    <template #label>
      <span
        class="content-item-label"
        :style="{
          color: themeStyle[theme].textColor1
        }"
        >{{ '产品样式' }}</span
      >
    </template>
    <div style="display: flex">
      <Popover :placement="'bottomRight'" :trigger="'click'" @open-change="handleChange">
        <template #content> <CustomProductStyle /> </template>
        <div v-if="!Nodedata.lock" class="custom-product-btn">产品编辑</div>
      </Popover>
      <div
        class="custom-product-preview"
        :style="{ backgroundColor: Nodedata.simData.product.backgroundColor }"
      ></div>
    </div>
  </FormItem>

  <div
    class="subheading"
    :style="{
      backgroundColor: themeStyle[theme].backgroundColor3,
      color: themeStyle[theme].textColor2
    }"
  >
    <span>端口设置</span>
    <RedoOutlined class="RedoOutlined-icon" :title="'刷新端口配置'" @click="refreshPort" />
  </div>
  <template v-for="(port, index) in Nodedata.simData.assemble.inputPortsVisual" :key="index">
    <FormItem>
      <template #label>
        <span
          class="content-item-label"
          :style="{
            color: themeStyle[theme].textColor1
          }"
          >{{ port.name }}</span
        >
      </template>
      <div style="display: flex">
        <Input v-model:value="port.value" type="number" size="small" @change="arrangeInputPorts" />
      </div>
    </FormItem>
  </template>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { RedoOutlined } from '@ant-design/icons-vue'
import { FormItem, Input, Popover } from 'ant-design-vue'
import CustomProductStyle from './CustomProductStyle.vue'

import { Nodedata, handleChange } from './nodeProTemHook'

const globalStyleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(globalStyleStore)

//装配站刷新端口
const refreshPort = (): void => {
  //获取连接的边
  const edges = window.api.handleCanvasData('getEdges', 'property', false, [
    'targetId',
    Nodedata.value.id
  ])

  if (edges.length > 0) {
    const previousNodes = [] as any[]
    edges.forEach((edge) => {
      const tempResult = window.api.handleCanvasData('getNodes', 'property', false, [
        'id',
        edge.sourceId as string
      ])
      if (tempResult.length > 0) {
        previousNodes.push(tempResult[0])
      }
    })

    const prePorts = previousNodes.map((node) => {
      return {
        id: node.id,
        name: node.name,
        value: 1
      }
    })

    Nodedata.value.simData.assemble.inputPortsVisual = prePorts
  }

  arrangeInputPorts()
}

//整理inputPorts
const arrangeInputPorts = (): void => {
  const portsVisual = Nodedata.value.simData.assemble.inputPortsVisual
  let tempData = {} as any
  portsVisual.forEach((port) => {
    tempData[port.id] = Number(port.value)
  })
  Nodedata.value.simData.assemble.inputPorts = tempData

  handleChange()
}
</script>

<style scoped lang="scss">
.content-item-label {
  font-size: $font-size-small;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-product-btn {
  border: 1px solid #cecece;
  color: #449bd1;
  padding: 0px 5px;
  cursor: pointer;
  margin-right: 10px;
}
.custom-product-preview {
  width: 24px;
  height: 24px;
  background-color: #7e7e7e;
}
.subheading {
  font-size: $font-size-small;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 0px 10px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .RedoOutlined-icon {
    cursor: pointer;
  }
}
</style>
